<script lang='ts' setup>
import { appName } from '../../../../../package.json'

const appNameText = ref<string>(appName);
const title = ref<string>('CodeGenerator')
function handleCloseWindow(): void {
  window.electron.ipcRenderer.send('application:close-window')
}

function startDownloadUpdate(): void {
  window.electron.ipcRenderer.send('application:update-download')
}

startDownloadUpdate()

const precent = ref<number>(0)
onMounted(() => {
  window.electron.ipcRenderer.on('application:download-progress', (_, progress) => {
    precent.value = progress.percent
  })
  window.electron.ipcRenderer.on('application:update-downloaded', () => {
    window.electron.ipcRenderer.send('application:show-download-tips')
  })
})

onUnmounted(() => {
  window.electron.ipcRenderer.removeAllListeners('application:download-progress')
  window.electron.ipcRenderer.removeAllListeners('application:update-downloaded')
})

</script>

<template >
  <div class="download-update">
    <div class="window-options">
      <div class="title"><logo :size="24" /> {{ title }}</div>
      <el-icon class="no-drag" color="#999" size="20" @click="handleCloseWindow">
          <IconMdiWindowClose class="icon" />
        </el-icon>
    </div>
    <div class="content">
      <template v-if="precent > 0">
        <div class="desc">正在下载{{ appNameText }}新版本<span class="precent">{{ precent }}%</span></div>
      <div class="progress"><el-progress :stroke-width="4" :percentage="precent" :show-text="false" /></div>
      </template>
      <template v-else>
        <div class="desc">正在分析安装包...</div>
      </template>
    </div>
  </div>
</template>

<style scoped lang='less'>
.download-update {
  .window-options {
    height: 30px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px;
    .title {
      font-size: 12px;
      display: flex;
      gap: 2px;
      align-items: center;
    }
    .el-icon:hover {
      cursor: pointer;
      .icon {
        color: #B40000;
      }
    }
  }
  .content {
    height: calc(100vh - 30px);
    display: flex;
    flex-direction: column;
    justify-content: start;
    padding: 10px;
    .desc {
      font-size: 12px;
      .precent {
        color: var(--el-color-primary);
        font-size: 10px;
        margin-left: 10px;
      }
    }
    .progress {
      margin-top: 8px;
      margin-bottom: 15px;
    }
  }
}
</style>
